<template>
	<view class="">
		<view class="username">
			<view class="itemTitle">
				收货人：
			</view>
			<input type="text" v-model="username" placeholder="收货人姓名" />
		</view>
		<view class="addressItem">
			<view class="itemTitle">
				
			</view>
			<text :class="{sexActive:sex==0}" @click="sexChange(0)">先生</text>
			<text :class="{sexActive:sex==1}" @click="sexChange(1)">女士</text>
		</view>
		<view class="addressItem">
			<view class="itemTitle">电话号码：</view>
			<input type="text" v-model="telphone" placeholder="请输入收货地址" />
		</view>
		<view class="addressItem">
			<view class="itemTitle">收货地址：</view>
			<pickerAddress class="city" @change="change">{{city}}</pickerAddress>
		</view>
		
		<view class="addressBox">
			<view class="itemTitle">详细地址：</view>
			<textarea value="" v-model="address" placeholder="请输入详细地址" />
		</view>
	<!-- 	默认选择开关 -->
		<view class="defaultItem">
			<view class="itemTitle">默认地址：</view>
			<template v-if="defaultAddress==1">
				<switch checked="true" color="#0bbbef" style="transform:scale(0.7)" @change="defaultChange" />
			</template>
			<template v-else>
				<switch color="#0bbbef" style="transform:scale(0.8)" @change="defaultChange" />
			</template>
			
		</view>
		
	<!-- 	保存地址 -->
	<view class="saveAddress" @click="editAddress">
		保存收货地址
	</view>
	</view>
</template>

<script>
import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
import {request} from '../../utils/require.js'
	export default{
		data(){
			return{
				username:'',
				telphone:'',
				address:'',
				defaultAddress:1,
				sex:0,
				city:'请选择收货地址',
				aid:'',
				back:''
			}
		},
		components:{
			pickerAddress
		},
		onLoad(option){
			// uni中在onLoad中用option来接收地址里面传来的id对象
			console.log(option.id)
			this.aid=option.id
			this.getAddress(option.id)
			// this.back=option.back
			// console.log(option.back)
		},
		methods:{
			// 根据switch的传参改变默认开关的开启
			defaultChange(e){
				console.log(e.target.value)
				if(e.target.value == true){
					this.defaultAddress = 1
				}else{
					this.defaultAddress = 0
				}
			},
			// 根据传参改变性别值
			sexChange(index){
				this.sex=index
			},
			// 拿到要编辑的地址
			getAddress(id){
				// 根据从地址列表list中传过来的id再到数据库中查找对应的值
				request('/member/getAddressInfo', {id:id}).then((res)=>{
					console.log(res.data)
					this.username = res.data.username
					this.telphone = res.data.telphone
					this.address = res.data.address
					this.defaultAddress = res.data.default
					this.sex = res.data.sex
					this.city=res.data.city
				})
			},
			change(data){
				this.city = data.data.join('')
				console.log(data.data.join(''))
			},
			// 编辑完地址后保存  需要传参保存
			editAddress(){
				//验证表单
				if(!this.check.username(this.username)){return;}
				if(!this.check.telphone(this.telphone)){return;}
				if(!this.check.city(this.city)){return}
				if(!this.check.address(this.address)){return}
				// 提交保存编辑后的地址
				request('/member/addressEdit',{
					username:this.username,
					telphone:this.telphone,
					address:this.address,
					default:this.defaultAddress,
					city:this.city,
					sex:this.sex,
					id:this.aid
				}).then((res)=>{
					console.log(res)
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				})
			}
		}
	}
</script>

<style>
	.username{
		display: flex;
		margin: 0 30rpx;
		height: 90rpx;
		align-items: center;
	}
	.itemTitle{
		width: 150rpx;
		font-size: 28rpx;
	}
	.username input{
		border-bottom: 1rpx solid #e5e5e5;
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
	}
	.addressItem{
		display: flex;
		margin: 0 30rpx;
		height: 90rpx;
		align-items: center;
		border-bottom: 1rpx solid #e5e5e5;
	}
	.addressItem text{
		width: 80rpx;
		height: 45rpx;
		display: block;
		border: 1rpx solid #e5e5e5;
		font-size: 24rpx;
		/* margin-right: 10rpx; */
		text-align: center;
		color: #999;
		line-height: 45rpx;
	}
	.addressItem text.sexActive{
		background: #0bbbef;
		border: none;
		color: #fff;
	}
	.addressBox{
		margin: 0 30rpx;

		height: 180rpx;
		display: flex;
/* 		align-items: center; */
		border-bottom: 1rpx solid #e5e5e5;
	}
	.addressBox .itemTitle{
			width: 150rpx;
			line-height: 90rpx;
			font-size: 24rpx;
	}
	.addressBox textarea{
		flex: 1;
		height: 180rpx;
		line-height: 90rpx;
	}
	.saveAddress{
		width: 600rpx;
		margin: 80rpx auto;
		height: 80rpx;
		line-height: 80rpx;
		letter-spacing: 10rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		background: #0bbbef;
		border-radius: 80rpx;
	}
	.city{
		font-size: 28rpx;
		color: #000;
	}
	.defaultItem{
		margin: 0 30rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: space-between;
	}
	
</style>
